<template>
  <div ref="chartContainer" :style="{ width: '100%', height: '400px' }"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'LineChartOfDynamic',
  props: {
    chartDataSource: {
      type: Object,
      required: true,
    },
  },
  watch: {
    chartDataSource: {
      deep: true,
      handler(chartDataSourceWatch) {
        console.log("chartDataSourceWatch on:" + JSON.stringify(chartDataSourceWatch));

        if (chartDataSourceWatch.yAxisData === null || chartDataSourceWatch.yAxisData === []) {
          // 清空图标内容
          if (this.chartInstance) {
            this.chartInstance.clear();
          }
          return;
        }
        console.log("chartDataSourceWatch init")
        this.analysisData(this.chartInstance, chartDataSourceWatch);

      },
    },
  },

  data() {
    return {
      chartInstance: null,
      chartData: {
        // x轴数据
        xaxisData: this.chartDataSource.xaxisData || [],
        // y轴数据
        yaxisData: this.chartDataSource.yaxisData || [],
        // y轴数据格式化方法,自定义传入,没有方法传null
        yAxisFormatFunction: this.chartDataSource.yAxisFormatFunction
      },
    };
  },
  mounted() {
    this.initChart();
  },


  beforeDestroy() {
    this.disposeChart();
  },

  methods: {
    initChart() {
      const chartContainer = this.$refs.chartContainer;
      this.chartInstance = echarts.init(chartContainer);
      this.analysisData(this.chartInstance, this.chartDataSource);
    },

    analysisData(chartInstance, chartDataSource) {
      const options = {
        xAxis: {
          type: 'category',
          data: this.chartDataSource.xaxisData,
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: chartDataSource.yAxisFormatFunction
          }
        },
        series: chartDataSource.yaxisData.map((item, index) => ({
          data: item.data,
          type: 'line',
          smooth: true,
          lineStyle: {
            color: this.generateLineColor(index),
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {offset: 0, color: 'rgba(91, 143, 249, 0)'},
                {offset: 1, color: 'rgba(91, 143, 249, 0)'},
              ],
              globalCoord: false,
            },
          },
          // 添加名称以区分不同的数据系列
          name: item.name,
        })),
        //标题
        legend: {
          show: true,
          orient: 'horizontal',
          top: 'top',
          left: 'center',
          data: this.chartDataSource.yaxisData.map(item => item.name),
        },
      };
      this.chartInstance.setOption(options);
    },

    //
    disposeChart() {
      if (this.chartInstance) {
        this.chartInstance.dispose();
        this.chartInstance = null;
      }
    },
    // 使用 generateLineColor 函数生成不同颜色
    generateLineColor(index) {
      const colors = ['#0000FF', '#FF0000', '#FFFF00', '#00FF00', '#871F78', '#CD7F32']; // 示例颜色列表
      return colors[index % colors.length];
    }

  },
};
</script>
